<template>
	<view class="header" >
		<view v-for="(item, index) in categoryList" :key="index" @tap="toCategory(item.id)">
		<view class="info">
			<view class="integral_section" >
				<view class="top">
					<text class="title">{{item.name}}</text>
					
				</view>
				<view class="bottom">
					{{item.departmentname}}/{{item.doctorname}}
					
				</view>
			</view>
			<view class="qrcode_section" @tap="memberCode">
				<view>就诊时间</view>
				<view>{{item.date}}</view>
				<view>{{item.shiduan}}</view>
			</view>
		</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex'
	import mm from '../../api/member.js'
	export default {
		data() {
			return {

				categoryList: [],


			}
		},
		onShow() {
			this.getguahaojilu();
		},
		methods: {
			// 查询医院列表方法
			toCategory(id){
				uni.navigateTo({
					url:'/pages/appointment/jiluxiangqing?id='+id
				})
			},
			getguahaojilu() {
				var data = {
					info: JSON.stringify({

						"openid": mm.openid
					})
				};
				this.$api.getguahaojilu(data).then(res => {
					console.log('查到的数据:' + JSON.stringify(res));
					for(var i=0;i<res.length;i++){
						res[i].date=res[i].date.substring(0,res[i].date.indexOf(" ")); 
					}
					if (res.length < 1) {
						this.tishi = "暂无挂号记录",
							this.flag = true
					} else {
						this.categoryList = res;
						this.flag = false
					}
				}).catch(err => {
					// 登录失败
					uni.hideLoading()
					uni.showToast({
						title: '查找失败',
						icon: 'none'
					});

				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.addren {
		position: relative;
		margin-top: -10rpx;
		margin-left: 25rpx;

		width: 700rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		height: 170rpx;

		.addjiuzhenren {
			margin-left: 150rpx;
			margin-top: -70rpx;
			font-size: 35rpx;
		}

		.ren {
			margin-left: 150rpx;
			color: #9A9A9A;
			font-size: 30rpx;
			margin-top: 10rpx;
		}

		.add {

			margin-left: 10rpx;
			margin-top: 30rpx;
			display: flex;

			.add1 {
				margin-top: 35rpx;
				margin-left: 20rpx;
				width: 100rpx;
				height: 100rpx;
			}
		}
		
		.guahao{
			/* margin-right:5rpx ; */
			background-color: #FFA500;
			width: 110rpx;
			height: 40rpx;
			border-radius: 25rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.yuhao{
			font-size: 28rpx;
		}
		

		.jiantou {
			.jiantou1 {
				width: 30rpx;
				height: 30rpx;

			}

			margin-left: 650rpx;
			margin-top:-60rpx;
			display: flex;
		}
	}
	
	.info {
		position: relative;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.integral_section {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			.top {
				display: flex;
				align-items: center;
				
				.title {
					color: $text-color-base;
					font-size: 28rpx;
					margin-right: 10rpx;
				}
				.value {
					font-size: 44rpx;
					font-weight: bold;
				}
			}
			
			.bottom {
				font-size: $font-size-sm;
				color: $text-color-assist;
				display: flex;
				align-items: center;
			}
		}
		
		.qrcode_section {
			color: $text-color-base;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			
			
		}
	}

	.selectren {
		margin-top: 25rpx;

		.aaa {
			position: relative;
			margin-top: 20rpx;
			margin-left: 25rpx;

			width: 700rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			height: 170rpx;

			.jiantou {
				.jiantou1 {
					width: 30rpx;
					height: 30rpx;

				}

				margin-left: 650rpx;
				margin-top:-10rpx;
				display: flex;
			}

			.name {
				display: flex;
				padding-top: 35rpx;
				position: relative;
				margin-left: 20rpx;
				font-size: 35rpx;
			}

			.cadid {
				position: relative;
				display: flex;

				font-size: 30rpx;
				margin-left: 20rpx;
				color: #9A9A9A;
			}

		}

	}
</style>
